<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	*{
		padding:0;
		margin:0;
		color:#666;
	}
	.box{
		width:1200px;
		height:auto;
		margin:50px auto;
	}
	.header{
		height:80px;
		background:#f1f1f1;
		text-align:center;
		position:relative;
		line-height:80px;
		font-size:32px;
		border-radius:10px 10px 0 0;

	}
	input{
		width:100%;
		height:100%;
		opacity:0;
		position:absolute;
		left:0;
		top:0;
	}
	.body{
		border:1px solid #f1f1f1;
		padding:15px;
	}
	#list{
		min-height:350px;
		display:flex;
		flex-wrap:wrap;
	}
	#list li{
		width:22%;
		height:300px;
		list-style:none;
		box-shadow:5px 5px 10px #ccc;
		padding:15px;
	}
	#list li img{
		width:100%;
		height:100%;
	}
  </style>
 </head>
 <body>
	<div class="box">
		<div class="header">
			点击上传
			<input type="file" name="" id="upload" />
		</div>
		<div class="body">
			<ul id="list">
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		var oUpload = document.getElementById('upload');
		var oUl = document.getElementById('list');
		oUpload.addEventListener('change', function() {
			var file = this.files[0];
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.addEventListener('load', function() {
				var oLi = document.createElement('li');
				oLi.innerHTML = "<img src='"+this.result+"'/>";
				oUl.appendChild(oLi);
			}, false)
		}, false)
	</script>
 </body>
</html>
